import React from 'react';
import { View, StyleSheet, Image, Text, BackHandler, SafeAreaView } from 'react-native';
import { iconBigFailureOrange, iconWaitingCoffee, iconBigSuccessGreen } from '@/images';
import { BackImageOn, msg, XMHeader, Button } from '@/common';
import {
  mainBgColorWhite,
  px2dp,
  fontColorBlack,
  fontColorCoffee,
  fontColorSecDeepGray,
  isAndroid,
} from '@/styles';

const { Submit } = Button;

export default class FeedBackDriverCer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: 0, // 0 失败  1 成功  2 等待
      title: '',
      desc: '',
      routerFrom: '',
    };
  }

  componentDidMount() {
    if (isAndroid) {
      BackHandler.addEventListener('hardwareBackPress', this._onBack);
    }
    // 误删  解决 点击物理返回键 连续回跳的问题
    const { navigation } = this.props;
    navigation.setParams({ onBack: this.onBack });
  }

  componentWillUnmount() {
    if (Platform.OS === 'android') {
      BackHandler.removeEventListener('hardwareBackPress', this._onBack);
    }
  }

  render = () => {
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { status, title, desc, routerFrom, } = params;
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
          <XMHeader
            title='认证结果'
            renderLeft={() => {
              return <BackImageOn onClick={this._onBack} />;
            }}
          />
          <Image
            source={this._renderStatusImg(status)}
            resizeMode='stretch'
            style={styles.img}
          />
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.desc}>{desc}</Text>
          {status === 0 && (
            <Submit
              text='重新认证'
              onClick={() => {
                msg.emit('router: goToNext', { routeName: 'DriverCer', routerFrom });
              }}
              boxStyle={styles.boxStyle}
              btnTextStyle={{
                fontSize: px2dp(32),
              }}
            />
          )}
          {status === 1 && (
            <Submit
              text='完成'
              onClick={() => {
                this._onBack();
              }}
              boxStyle={styles.boxStyle}
              btnTextStyle={{
                fontSize: px2dp(32),
              }}
            />
          )}
        </View>
      </SafeAreaView>
    );
  }

  _onBack = () => {
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { routerFrom } = params;
    if (routerFrom) {
      msg.emit('router: refreshRoutes', {
        routeNames: ['DriverTab', 'CertificationProgress']
      });
      msg.emit('router: goToNext', {
        routeName: routerFrom,
        routerFrom: 'FeedBackDriverCer'
      });
    } else {
      msg.emit('router: back');
    }
    return true;
  };

  _renderStatusImg=(status) => {
    switch (status) {
    case 0:
      return iconBigFailureOrange;
    case 1:
      return iconBigSuccessGreen;
    case 2:
      return iconWaitingCoffee;

    default:
      return iconWaitingCoffee;
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: mainBgColorWhite,
  },
  img: {
    width: px2dp(294),
    height: px2dp(294),
    marginTop: px2dp(35),
  },
  title: {
    fontSize: px2dp(40),
    color: fontColorBlack,
    fontWeight: 'bold',
  },
  desc: {
    fontSize: px2dp(28),
    marginTop: px2dp(12),
    color: fontColorSecDeepGray,
    width: px2dp(640),
    textAlign: 'center'
  },
  boxStyle: {
    width: px2dp(590),
    height: px2dp(88),
    borderWidth: 1,
    borderColor: fontColorCoffee,
    borderRadius: px2dp(44),
    marginTop: px2dp(64),
    // position: 'absolute',
    // bottom: px2dp(240),
  }
});
